import React from 'react';
import { StyleItem } from '../styled'
import { Link } from 'react-router-dom';

function hash(e) {
  
  console.log(1);
  e.stopPropagation();
}
export default function FilmsItem(props) {
  let { filmId, name, poster, actors, nation, grade, filmType, runtime } = props.data;
 
  return <StyleItem>
    <Link to={'/film/'+filmId} className='nowpaly-wrap'>
      <div className='nowplay-img'>
        <img src={poster} alt="" />
      </div>
      <div className='nowplay-info'>
        <div className='nowplay-name col-item'>
          <span className='name'>{name}</span>
          <span className='item'>{ filmType.name }</span>
        </div>
        <div className='nowplay-grade col-item'>
          {grade?(<><span className='label'>观众评分</span>
          <span className='grade'>{  grade }</span></>):<></>}
        </div>
        <div className='nowplay-actors col-item'>
          主演：
          {
            actors.map(el => {
              return el.name+' '
            })
          }
        </div>
        <div className='nowplay-detail col-item'>
          { nation } | {runtime}分钟
        </div>
      </div>
    </Link>
      <div className='nowplay-buy' onClick={hash}>
        购票
      </div>
  </StyleItem>;
}
